<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据图表</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	</head>
	<body>
		<div id="container" style="height:15rem"></div>
		<br>
		<br>
		<div id="bbs" style="height:15rem"></div>
		<br>
		<br>
		<div id="ttr" style="height:15rem"></div>
	</body>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
	<script src="../../script/webuploader.min.js"></script>
	<script src="../../script/diyUpload.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript">
		apiready = function() {
		
		
		};
		var dom = document.getElementById("container");
		var domb = document.getElementById("bbs");
		var domt = document.getElementById("ttr");
		var myChart = echarts.init(dom);
		var myChartb = echarts.init(domb);
		var myChartt = echarts.init(domt);
		var app = {};
		option = null;
			myChart.setOption( option = {
				title : {
					text : '土壤PH'
				},
				tooltip : {
					trigger : 'axis'
				},
				xAxis : {
					data : [2019-01-11,2019-01-12,2019-01-13,2019-01-14,2019-01-15,2019-01-16]
				},
				yAxis : {
					splitLine : {
						show : false
					}
				},
				toolbox : {
					left : 'center',
					feature : {
						dataZoom : {
							yAxisIndex : 'none'
						},
						restore : {},
						saveAsImage : {}
					}
				},
				dataZoom : [{
					startValue : '2014-06-01'
				}, {
					type : 'inside'
				}],
				visualMap : {
					top : 10,
					right : 10,
					pieces : [{
						gt : 0,
						lte : 50,
						color : '#096'
					}, {
						gt : 50,
						lte : 100,
						color : '#ffde33'
					}, {
						gt : 100,
						lte : 150,
						color : '#ff9933'
					}, {
						gt : 150,
						lte : 200,
						color : '#cc0033'
					}, {
						gt : 200,
						lte : 300,
						color : '#660099'
					}, {
						gt : 300,
						color : '#7e0023'
					}],
					outOfRange : {
						color : '#999'
					}
				},
				series : {
					name : 'Beijing AQI',
					type : 'line',
					data :  [100,200,300,400,500,600],
					markLine : {
						silent : true,
						data : [{
							yAxis : 50
						}, {
							yAxis : 100
						}, {
							yAxis : 150
						}, {
							yAxis : 200
						}, {
							yAxis : 300
						}]
					}
				}
			});
	
		;
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
			myChartb.setOption(option, true);
			myChartt.setOption(option, true);
		}
	</script>
</html>
